import React, { Component } from 'react'
import { ThemeContext } from './ThemeContext.js'

// 详细见pdf
class ContextTypePage extends Component {
  // 因为被ThemeProvider包裹了，所以这里可以获取传递的value  注意获取的方法， 使用 static 声明的变量，
  // 将抽离出的ThemeContext赋值给 contextType 就可以了  记住是ThemeContext 不是ThemeProvider
  // 记住 一定是contextType 不能随便起变量名  经过了这一步就可以通过this.context来访问传递的值了
  // contextType会被重新经过处理后放在this的context上
  // 为什么使用static呢，因为使用static就是将这个属性直接挂载到类上，而不是实例对象上  ES6
  // 这样的方法只能订阅一个context
  static contextType = ThemeContext

  render () {
    console.log(this, 'this')
    return (
      <div>
        {/* context在任何生命周期都可以获取到 */}
        <h3 style = {{ color: this.context.themeColor }}>ContextTypePage</h3>
      </div>
    )
  }
}

// 静态属性可以直接打印 可以看看有些什么
// console.log(ContextTypePage.contextType)

// 如果不实用static还可以这样  与static效果一样  这是老写法
// ContextTypePage.contextType=ThemeContext
export default ContextTypePage
